{extend name="base" /}
{block name="body"}
    <link rel="stylesheet" media="screen" href="{__CSS__}/bootstrap/css/bootstrap.min.css"/>
<style type="text/css">

/*论坛内页*/
.line4, .line5 { 
   word-break: break-all; 
   background-color: #fff; 
   padding: 5px; 
   line-height: 30px; 
   padding: 5px; 
   color: #636363; 
   border-bottom: 1px solid #EBEBEB; 
   font-size:15px; 
   }
.line4 a, .line5 a { 
   color: #000; 
   font-weight:600; 
   font-size: 16px; 
   }
.line4:hover,.line5:hover { 
   background:#f9f9f9; 
   }
.line4 .right, .line5 .right { 
   font-size: 12px; 
   }
.line4 a:hover, .line5 a:hover { 
   color: #006cbf; 
   }
.line4 .Sex,.line5 .Sex { 
   width:17px; 
   height:17px; 
   border-radius:10px; 
   margin-left:5px; 
   vertical-align:middle; 
   margin-bottom: 2px; 
   }
.urlbtn { 
   padding: 2px 7px; 
   transition: 0.2s; 
   color: #000; 
   background: #E7E7E7; 
   border-radius: 5px; 
   border: 1px solid #CFCFCF; 
   }
.line4 .huifu,.line5 .huifu { 
   margin:2px; 
   padding:3px 5px; 
   color:#888; 
   font-size:13px; 
   border: 1px solid #ECECEC; 
   border-radius:3px; 
   line-height:25px; 
   background:#FFFDF9; 
   }
.line4 .huifu a,.line5 .huifu a { 
   font-size:14px; 
   }
.line4 .huifu img,.line5 .huifu img { 
   max-width:100%; 
   max-height:200px; 
   }
.line4 .urlbtn,.line5 .urlbtn { 
   text-shadow:none; 
   font-family:"Microsoft YaHei"; 
   color:#434343; 
   margin-left:3px; 
   font-size:13px; 
   font-weight:600; 
   }
.right { 
   font-size: 12px; 
   float: right; 
   color: rgba(255,0,0,50%); 
   margin-right: 20px; 
   }
   textarea { 
       display: block; 
   margin: 0 auto; 
       
   }        
   textarea:-internal-autofill-previewed,
   textarea:-internal-autofill-selected {
    -webkit-text-fill-color: #999;
    transition: background-color 5000s ease-out 0.5s;
   }  
    textarea:focus{
    border-style:none;   
    box-shadow: 2px 2px 15px #FF5722;
 } 
 </style>
<body class="group-page"> 
<!--新增表单 start-->
            <div class="panel panel-default">
                <div class="panel-body">
                    <h3 style="margin-top: 15px;" class="page-header"><i style="margin-top: -30px;">Chat zone</i></h3>
                    <!---分页---->
                     
            <div class="panel panel-default" id="comments">
                <div class="panel-heading">
                   <h3 class="panel-title">{:__('Chat record')}
                        
                        <small><?php echo str_replace('%a', '<b style="color: #ff0000;">' . $count . '</b>', __('Total chat comments')); ?></small>
                    </h3>
                </div>
                <div class="panel-body">
                    <div id="comment-container">
                        <!-- S 评论列表 -->

 {foreach $chatReply as $vo}

     <div class="line4">
          <table>
               <tbody>
                <tr>
                  <td valign="top" align="center" style="width:50px;">
     <a href="/user/index">
     <div style="width:50px;height:50px;border-width: 0px;-moz-border-radius: 25px;-khtml-border-radius: 25px;-webkit-border-radius: 25px;border-radius: 25px;padding:0px; margin-top:5px; background:url('{$vo.avatar}'); background-size:100% 100%">
          
     </div></a>
     <p align="center" style="font-size:14px">{$vo.chat_id}楼</p>
</td>
<td style="width:100%;padding-left:5px">
     <a href="/user/index">{$vo.username ?: '游客'}</a>
     <img class="Sex" src="{__IMG__}/miss.png" alt="{$vo.content}">
     <span class="right">{:time_trans($vo['create_time'])}</span>
     <br>{:html_entity_decode($vo.content)} 
     <p align="right">
        {if $user.id=='1'}
        <a class="urlbtn ajaxdelete" href="{:url('notice/reply_del')}?id={$vo.id}">删除</a>
        <a href="javascript:;" uid="{$vo.user_id}" pid_id="{$vo.id}" replys="1" title="{:html_entity_decode($vo.content)}" class="replyedit"><span class="urlbtn">审核</span></a>
        {/if}
     <small><a href="javascript:;" uid="{$vo.user_id}" pid_id="{$vo.id}" title="" replys="<div class='huifu'>@<a href='/user/index'>{$vo.username}</a>：{if $vo.pid_id} {$vo.reply} {else/} {:html_entity_decode($vo.content)} {/if}</div>" class="reply"><span class="urlbtn">回复TA</span></a></small>
        </p>
     </td>
 </tr>
</tbody>
</table>
</div>
 {/foreach}
                       
                        <!-- E 评论列表 -->

                        <!-- S 评论分页 -->
                        <div id="commentpager" class="text-center">
                            {$chatReply|raw}
                        </div>
                        <!-- E 评论分页 -->

                        <!-- S 发表评论 -->
                        <div id="postcomment">
                            <h3>发表留言</h3>
                            <form id="changepwd-form" class="layui-form" method="POST" action="" onclick="return false">
                               
                                <input type="hidden" name="pid_id" id="pid_id" value=""/>
                                <input type="hidden" name="uid" id="uid" value=""/>
                                <input type="hidden" name="replys" id="replys" value=""/>
                                <div class="form-group">
                                    <textarea name="content" maxlength="300" id="commentcontent" cols="6" rows="5" class="layui-textarea" placeholder='聊天内容输入'></textarea>
                                </div>
                                <div class="form-group">
                                    <button style="border: 1px solid #232323;" type="submit" id="btn-chat" class="btn layui-btn-sm layui-btn layui-btn-primary" disabled="disabled" lay-filter="save" lay-submit>{:__('determine')}</button>
                                </div>
                            </form>
                        </div>
                        <!-- E 发表评论 -->
                    </div>
                </div>
            </div>
    </div>
</div>
   {/block}      
{include file="common/footer" /}
{block name="js"}
    <script>

   $("textarea").on("input",function(){
             var getContent = $("#commentcontent").val();
 
             $(this).css("color","#232323");
 
             if(getContent != ''){
               $('.btn').attr('disabled', false).css('background','#009688').css('border','none').css('color','#fff');
               }else{ 
             $('.btn').attr('disabled', true).css('background','rgba(0,0,0,0.2)').css('border','1px solid #fff').css('color','#232323');
    
           }
       });
   
// 通用删除
$('.ajaxdelete').on('click', function () {
    var url = $(this).attr('href');
    layer.confirm('确定操作？', {
        icon: 3,
        title: '提示'
    }, function (index) {
        var index = layer.msg('操作中，请稍候', {
            icon: 16,
            time: false,
            shade: 0.3
        });
        $.ajax({
            url: url,
            type: 'post',
            dataType: 'json',
            success: function (result) {
                if (result === true) {
                    setTimeout(function () { 
                  layer.msg('删除成功',{time:2000});//2秒后自动关闭
                  location.reload();
                    }, 1000);
                }ele
            }
        });
    });
    return false;
});
    //审核
        $(".replyedit").on("click", function () {
            $(this).parent().parent().append($("div#postcomment").detach());
            $("#postcomment h3 a").show();
            $("#uid").focus().val($(this).attr("uid"));
            $("#pid_id").focus().val($(this).attr("pid_id"));
            $("#replys").focus().val($(this).attr("replys"));
            $("#commentcontent").focus().val($(this).attr("title"));
        });
 //回复TA
        $(".reply").on("click", function () {
            $(this).parent().parent().append($("div#postcomment").detach());
            $("#postcomment h3 a").show();
            $("#uid").focus().val($(this).attr("uid"));
            $("#pid_id").focus().val($(this).attr("pid_id"));
            $("#replys").focus().val($(this).attr("replys"));
            $("#commentcontent").focus().val($(this).attr("title"));
        });
    layui.use('form', function () {
        var $ = layui.jquery,
            form = layui.form;
        form.render();
        //表单提交
         form.on('submit(save)', function (data) {  
           
       var index = layer.msg('<i>{:__('Submitting, please wait')}</i>', {
        icon: 16,
        time: false,
        shade: 0.3,
        anim: 4
    });
           params = data.field;
            submit($, params);
            return false;
        });

        function submit($, params) {
            $.post('/detail/chatzone', params, function (res) {
                 if (res.code == 0) {
                    layer.msg(res.msg, {icon: 1});
                    setTimeout(function () {
                        
                     if(isNaN(parseInt($("#btn-chat").html()))){  
                    
                        var origText  = 5;
                        var interval = setInterval(function(){
                            var time = --origText;
                            if(time <= 0) {
                                clearInterval(interval);
                               location.reload();
                            }else{
                                $('#btn-chat').html(time+'{:__('second')}').css('border','none').css('color','#616161').css('background','buttonface').attr("disabled","true");
                            
                        }
                        }, 1000);
                         }

                       // location.reload();
                    }, 1500)
                } else {
                    layer.msg(res.msg, {icon: 0})
                }
            }, 'json');
        }
    })
</script>
{/block} 